\section{Gramática}

\subsection{Descripción general y decisiones tomadas}

\paragraph{} Un \emph{elemento HTML} es todo lo que se encuentra entre una etiqueta de apertura y una etiqueta de cierre, incluyendo las etiquetas. El contenido del elemento es lo que se encuentra entre las dos etiquetas. La excepción a esta regla es la de la etiqueta \verb/<br>/ que, al no tener contenido, no tiene etiqueta de cierre.

\paragraph{} Para parsear el documento vamos a asumir que, en general, el contenido de un \emph{elemento HTML} es a su vez una lista de otros \emph{elementos HTML} y texto.

\paragraph{} Por ejemplo, el contenido de 

\begin{verbatim} 
<body> Esto es <p>una <h1>prueba</h1></p> <br></body> 
\end{verbatim} 


es una lista compuesta por: un texto, el elemento \verb/p/ y el elemento \verb/br/. A su vez, el elemento \verb/p/ tiene otra lista adentro.

\subsection{Definición de la gramática}

Definimos la gramática de la siguiente manera:\\

G$=$$< $$V_{n}$, $V_{t}$, S, P $>$

$V_{n}$ $=$ \{Doc, Page, Header, Body, ListaH, TitleOScript, Title, Script, ListaE, Elem, Div, H1, P\}

$V_{t}$ $=$ \{\tag{html}, \tag{/html}, \tag{head}, \tag{/head}, \tag{title}, \tag{/title}, \tag{script}, \tag{/script}, \tag{div}, \tag{/div}, \tag{h1}, \tag{/h1}, \tag{p}, \tag{/p}, texto, textoScript\}

$S$ $=$ Doc

$P$ $=$\{
\begin{bnf*}
\bnfprod{Doc} 		{\tag{html} \bnfsp  \bnfpn{Page} \bnfsp\bnfsp  \tag{/html} }\\ 
	\bnfprod{Page} 		{\bnfpn{Header} \bnfsp \bnfpn{Body}} \\
	\bnfprod{Header} 	{\tag{head} \bnfsp  \bnfpn{ListH} \bnfsp\bnfsp  \tag{/head} \bnfor \bnfes}\\ 
	\bnfprod{ListH} 	{\bnfpn{TitleOScript} \bnfsp \bnfpn{ListH} \bnfor \bnfes}\\ 
	\bnfprod{TitleOScript} 		{\bnfpn{Title} \bnfor \bnfpn{Script}}\\ 
	\bnfprod{Title} 	{\tag{title} \bnfsp \bnfts{texto} \bnfsp \bnfsp \tag{/title}}\\ 
	\bnfprod{Script} 	{\tag{script} \bnfsp \bnfts{textoScript} \bnfsp \bnfsp \tag{/script}}\\ 
	\bnfprod{Body} 		{\tag{body} \bnfsp  \bnfpn{ListaE} \bnfsp\bnfsp  \tag{/body} \bnfor \bnfes}\\ 	
	\bnfprod{ListaE} 	{\bnfts{texto} \bnfsp \bnfpn{ListaE} \bnfor \tag{br} \bnfsp \bnfpn{ListaE} \bnfor \bnfpn{Elem} \bnfsp \bnfpn{ListaE} \bnfor \bnfes}\\ 
	\bnfprod{Elem} 	{\bnfpn{Div} \bnfor \bnfpn{H1} \bnfor \bnfpn{P}}\\ 
	\bnfprod{Div} 	{\tag{div} \bnfpn{ListaE} \bnfsp \tag{/div}}\\ 
	\bnfprod{H1} 	{\tag{h1} \bnfpn{ListaE} \bnfsp \tag{/h1}}\\ 
	\bnfprod{P} 	{\tag{p} \bnfpn{ListaE} \bnfsp \tag{/p}}\\ 
\end{bnf*}
\}

\subsection{Expresiones Regulares de los tokens}

\begin{tabular}{ l  l }
	\textbf{Token} 	& \textbf{Expresión Regular} \\
	\tag{html} 		& \tag{html}	\\
	\tag{/html}	 	& \tag{/html}	\\
	\tag{head }		& \tag{head}	\\
	\tag{/head} 		& \tag{title} 	\\
	\tag{/title} 	& \tag{/title}	\\
	\tag{script} 	& \tag{script}	\\
	\tag{/script} 	& \tag{/script}	\\
	\tag{div} 		& \tag{div}	\\
	\tag{/div} 		& \tag{/div}	\\
	\tag{h1} 		& \tag{h1}	\\
	\tag{/h1} 		& \tag{/h1}	\\
	\tag{p} 			& \tag{p}	\\
	\tag{/p} 		& \tag{/p}	\\
	comentario 		& $<!-\Sigma^*->$	\\
	texto 			& $\Sigma^* \setminus$ comentario	\\
	textoScript 		& $\Sigma^* \setminus$ \tag{/script}	\\
	espacio 			& $\_^+$\\
\end{tabular}


Con $\Sigma =$ \{ \texttt{a,...,z,A,...,Z,0,...,9,!,",',\#,\&,/,(,),=,>,<,.,-,\_,...}\}, un conjunto finito de letras, números y símbolos. \\

Observación: dentro de $\Sigma$ incluimos cualquier símbolo o letra, 
por lo tanto podrían existir cosas como \tag{/script} dentro de $\Sigma^*$ que cierra el script o \texttt{->} que cierra un comentario.
Por la presedencia entre los tokens entendemos que si el texto contiene \tag{/script} ahí se cierra el script o si contiene \texttt{->} estaría cerrando un comentario. 





\subsection{Ejemplos con árboles de derivación}
A continuación vamos a dar algunos ejemplos para ver cómo la gramática reconoce el lenguaje \emph{HTML}.
Los siguientes son los ejemplos que vamos a mostrar:
\begin{itemize}
 	\item \texttt{<html><header><title>Esto es un título</title></header><body>Esto es un body</body></html>}
  	\item \texttt{<html><body><div>Esto es un div</div><br><h1>Un h1</h1></body></html>}
	\item \texttt{<html> <head><title>Esto es un titulo</title> <!- esto es un comentario -> <script>print(”Hola mundo”)</script></head><body>Esto es <p>una <h1>prueba</h1></p> <br></body></html>}
\end{itemize}

\subsubsection*{Ejemplo 1}

Secuencia de caracteres:

\texttt{<html><header><title>Esto es un título</title></header><body>Esto es un body</body></html>}

Secuencia de tokens luego del Analizador Léxico:

\begin{tabular}{|c|c|c|c|c|c|c|c|c|c|}
\hline
\texttt{<html>} &
\texttt{<header>} &
\texttt{<title>} & 
\texttt{texto} &
\texttt{</title>} &
\texttt{</header>} &
\texttt{<body>} &
\texttt{texto} &
\texttt{</body>} &
\texttt{</html>} \\
\hline
\end{tabular}

Ver Figura 1.

\begin{figure}[h!]
	\centering
		\caption{Árbol de derivación}
	\includegraphics[width=\linewidth]{ejemplo1.png}
\end{figure}

\subsubsection*{Ejemplo 2}

Secuencia de caracteres:

\texttt{<html><body><div>Esto es un div</div><br><h1>Un h1</h1></body></html>}

Secuencia de tokens luego del Analizador Léxico:

\begin{tabular}{|c|c|c|c|c|c|c|c|c|c|c|}
\hline
\texttt{<html>} &
\texttt{<body>} &
\texttt{<div>} & 
\texttt{texto} &
\texttt{</div>} &
\texttt{<br>} &
\texttt{<h1>} &
\texttt{texto} &
\texttt{</h1>} &
\texttt{</body>} &
\texttt{</html>} \\
\hline
\end{tabular}

Ver Figura 2.

\begin{figure}[h!]
	\centering
		\caption{Árbol de derivación}
	\includegraphics[width=\linewidth]{ejemplo2.png}
\end{figure}

\subsubsection*{Ejemplo 3}

Secuencia de caracteres:

\texttt{<html> <head><title>Esto es un titulo</title> <!- esto es un comentario -> <script>print(”Hola mundo”)</script></head><body>Esto es <p>una <h1>prueba</h1></p> <br></body></html>}

Secuencia de tokens luego del Analizador Léxico:

\begin{tabular}{|c|c|c|c|c|c|c|c|c|}
\hline
\texttt{<html>} &
\texttt{<head>} &
\texttt{<title>} & 
\texttt{texto} &
\texttt{</title>} &
\texttt{<script>} &
\texttt{textoScript} &
\texttt{</script>} &
\texttt{</head>}  \\ \hline
\end{tabular}

\begin{tabular}{|c|c|c|c|c|c|c|c|c|c|c|}
\hline
\texttt{<body>} &
\texttt{texto} &
\texttt{<p>} &
\texttt{texto} &
\texttt{<h1>} & 
\texttt{texto} &
\texttt{</h1>} &
\texttt{</p>} &
\texttt{<br>} &
\texttt{</body>} &
\texttt{</html>} \\ \hline
\end{tabular}

Ver Figura 3.

\begin{figure}[h!]
	\centering
		\caption{Árbol de derivación}
	\includegraphics[width=\linewidth]{ejemplo3.png}
\end{figure}



